<div class="margin-bottom-20 ">
    <button id="btn-load-more" type="button" class="btn btn-sm btn-lg btn-block">点击加载更多</button>
</div>

<script>
    var PAGE_SIZE = <%= pageSize%>
    var PAGE_INDEX =  <%= pageIndex%>
    var COUNT =  <%= count%>
    var $btnLoadMore = $('#btn-load-more')
    var $containerWeiboList = $('<%= containerSelector%>')
    var api = '<%= api%>'

    // 加载更多
    $btnLoadMore.click(function () {
        var nextPageIndex = PAGE_INDEX + 1
        ajax.get(api + '/' + nextPageIndex, function(err, data) {
            if (err) {
                // 失败
                alert(err)
                return
            }
            // 更新 pageIndex
            PAGE_INDEX = data.pageIndex

            // 是否要隐藏“加载更多”
            if ((PAGE_INDEX + 1) * PAGE_SIZE >= COUNT) {
                $btnLoadMore.hide()
            }

            // 渲染页面
            var $tempContainer = $(data.blogListTpl)
            $tempContainer.each(function (index, item) {
                if (item.nodeType !== 1) {
                    // 不是 DOM 元素，是其他（如 #TEXT 类型）
                    return
                }
                $containerWeiboList.append($(item))
            })
        })
    })
</script>
